<template>
  <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '200px'
    },
    height: {
      type: String,
      default: '200px'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    // this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart(tableData) {
      this.chart = this.$echarts.init(document.getElementById(this.id))
      const xData = tableData.map(item => !item.unit ? item.materialName : item.materialName + `(${item.unit})`)
      const yData = tableData.map(item => item.totalPrice)
      const index = parseInt(3 * Math.random())
      const colorArr = ['rgba(0,191,183,1)', ' rgba(255, 144, 128, 1)', 'rgba(252, 230, 48, 1)']
      this.chart.setOption({
        backgroundColor: '#394056',
        // title: {
        //   x: '20',
        //   top: '20',
        //   textStyle: {
        //     color: '#fff',
        //     fontSize: '22'
        //   },
        //   subtextStyle: {
        //     color: '#90979c',
        //     fontSize: '16'
        //   }
        // },
        // tooltip: {
        //   trigger: 'axis',
        //   axisPointer: {
        //     textStyle: {
        //       color: '#fff'
        //     }
        //   }
        // },
        // grid: {
        //   left: '5%',
        //   right: '5%',
        //   borderWidth: 0,
        //   top: 150,
        //   bottom: 95,
        //   textStyle: {
        //     color: '#fff'
        //   }
        // },
        // calculable: true,
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: '#90979c'
            }
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitArea: {
            show: false
          },
          axisLabel: {
            interval: 0
          },
          data: xData

        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: false
          }
        },
        series: [
          {
            data: yData,
            type: 'line',
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'top',
                  fontSize: 9,
                  textStyle: {
                    color: 'white'
                  }
                }
              }
            }
          }
        ]
        //   dataZoom: [
        //     {
        //       show: true,
        //       height: 30,
        //       xAxisIndex: [0],
        //       bottom: 30,
        //       start: 0,
        //       end: 100,
        //       handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
        //       handleSize: '110%',
        //       handleStyle: {
        //         color: '#d3dee5'
        //       },
        //       textStyle: {
        //         color: '#fff'
        //       },
        //       borderColor: '#90979c'
        //     },
        //     {
        //       type: 'inside',
        //       show: true,
        //       height: 15,
        //       start: 1,
        //       end: 35
        //     }
        //   ],
        // xAxis: [
        //   {
        //     type: 'category',
        //     axisLine: {
        //       lineStyle: {
        //         color: '#90979c'
        //       }
        //     },
        //     splitLine: {
        //       show: false
        //     },
        //     axisTick: {
        //       show: false
        //     },
        //     splitArea: {
        //       show: false
        //     },
        //     axisLabel: {
        //       interval: 0
        //     },
        //     data: xData
        //   }
        // ],
        // yAxis: [
        //   {
        //     type: 'value',
        //     splitLine: {
        //       show: false
        //     },
        //     axisLine: {
        //       lineStyle: {
        //         color: '#90979c'
        //       }
        //     },
        //     axisTick: {
        //       show: false
        //     },
        //     axisLabel: {
        //       interval: 0
        //     },
        //     splitArea: {
        //       show: false
        //     }
        //   }
        // ],
        // series: [
        //   {
        //     name: '数量',
        //     type: 'bar',
        //     stack: 'total',
        //     itemStyle: {
        //       normal: {
        //         color: colorArr[index], // rgba(255,144,128,1)  // rgba(252,230,48,1)
        //         barBorderRadius: 0,
        //         label: {
        //           show: true,
        //           position: 'top',
        //           formatter(p) {
        //             return p.value > 0 ? p.value : ''
        //           }
        //         }
        //       }
        //     },
        //     data: yData
        //   }
        // ]
      })
    }
  }
}
</script>
